import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { filter } from '../actions/filter'
import { delCompleted } from '../actions/todos'

export default function TodoFooter() {
  const list = useSelector((state) => state.todos)
  const left = list.filter((item) => !item.done).length
  const isShow = list.some((item) => item.done)
  const dispatch = useDispatch()
  const showList = ['all', 'active', 'completed']
  const flag = useSelector((state) => state.filter)
  console.log(flag)
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{left}</strong> item left
      </span>
      <ul className="filters">
        {showList.map((item) => (
          <li key={item} onClick={() => dispatch(filter(item))}>
            <a className={item === flag ? 'selected' : ''} href="#/">
              {item}
            </a>
          </li>
        ))}
      </ul>
      {isShow && (
        <button
          className="clear-completed"
          onClick={() => dispatch(delCompleted())}
        >
          Clear completed
        </button>
      )}
    </footer>
  )
}
